<template>
  <div>
    <Header @find="search"></Header>
    <el-divider></el-divider>
    <el-scrollbar>
      <el-table :data="tableData">
        <!--动态列-->
        <el-table-column v-for="(it, index) in columnList" :key="index" :label="it.label" :prop="it.prop">
          <template v-slot="scope" v-if="it.label == '任务类型'">
            <el-tag effect="dark" size="large" type="success" v-if="scope.row.taskType === '送货'">送货</el-tag>
            <el-tag effect="dark" size="large"  v-else-if="scope.row.taskType==='收款'">收款</el-tag>
            <el-tag effect="dark" size="large" type="info" v-else-if="scope.row.taskType==='退货'">退货</el-tag>
            <el-tag effect="dark" size="large" type="warning" v-else-if="scope.row.taskType==='换货'">换货</el-tag>
            <el-tag effect="dark" size="large" type="warning" v-else-if="scope.row.taskType==='送货收款'">送货收款</el-tag>

          </template>
          <template v-slot="scope" v-if="it.label == '任务状态'">
            <el-tag effect="dark" size="large"  v-if="scope.row.taskState === '可分配'">可分配</el-tag>
            <el-tag effect="dark" :hit="false" type="success" size="large"  class="co1" v-else-if="scope.row.taskState==='可调度'">可调度</el-tag>
            <el-tag effect="dark" size="large" type="warning" v-else-if="scope.row.taskState==='已分配'">已分配</el-tag>
            <el-tag effect="dark" size="large" type="warning" class="co2" v-else-if="scope.row.taskState==='已领货'">已领货</el-tag>
            <el-tag effect="dark" size="large" type="success" v-else-if="scope.row.taskState==='完成'">完成</el-tag>
            <el-tag effect="dark" size="large" type="info" v-else-if="scope.row.taskState==='失败'">失败</el-tag>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          :page-size=pageSize
          :page-sizes="[10,20,30,40]"
          layout="total, prev, pager, next"
          :total=totalSize
          @current-change="pageChange"
          style="margin-top: 15px"
          :current-page=pageNow
      >
      </el-pagination>
    </el-scrollbar>
  </div>
</template>

<script>
import Header from '@/components/Header'
import axios from "axios";
import { MoreFilled,Edit,Search,Van } from '@element-plus/icons-vue';
export default {
  name: "Table",
  components: {Header},
  data() {
    return {
      dataList: [], // 表格数据
      columnList: [
        {
          label:'任务号',
          prop:'distributionTaskOrderId'
        },
        {
          label:'任务类型',
          prop:'taskType'
        },
        {
          label:'任务状态',
          prop:'taskState'
        }
      ], //表头数据
      tableData:[
      ],
      status:'',
      type:'',
      typecase:['送货收款','收款','送货','退货','换货'],
      tvalue:'',
      pageSize:8,
      totalSize:100,
      pageNow:1,
      id:'',
      Visible:false,
      data:{},
      pstate:0,
      goodsData:[]
    }
  },
  methods:{
    async handleAddRow(row, index) {
      const data = await this.接口()
      data.forEach(d => {
        // 列添加
        this.columnList.push({ label: '年龄' })
        // 行添加
        this.dataList.splice(index, 0, d)
      })
    },
    loadPost(){
      this.$axios.post("http://localhost:1060/taskOrder/findAll",{
        pageNow:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        res=res.data
        if (res.code == '200'){
          this.totalSize = res.data.totalRows
          this.tableData = res.data.rowData
          console.log(res.data)
        }else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    },
    pageChange(val){
      this.pageNow = val
      console.log(this.pageNow)
      this.$axios.post("http://localhost:1060/taskOrder/findByConditions",{
        status:this.status,
        date:this.tvalue,
        type:this.type,
        pageNow:this.pageNow,
        pageSize:this.pageSize,
        isReceipt:1
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
        }else {
        }

      })
    },
  },
  beforeMount() {
    this.loadPost()
  }
}
</script>

<style scoped>
body .el-table th.gutter {
  display: table-cell !important
}
.co1{
  background: #77c7d0;

}
.co2{
  background: #d9bf17;
}
.oo{
  background: #97d578
}
</style>